<template>
  <!-- 搜索模块 -->
  <div class="mod-search">
    <div class="container">
      <div class="search-hd">
        <div class="mod-top-search-m">
          <div class="mod-search-input">
            <button class="search-input-btn" @click="MSearch">
              <i class="el-icon-search"></i>
              <span class="icon-txt">搜索</span>
            </button>
            <input
              type="text"
              v-model="MInput"
              class="search-input-input"
              @input="MSearchInput"
              @focus="MSearchInput"
              @keyup.enter="MSearch"
            />
          </div>
          <div class="mod-search-result" v-if="MShowResult">
            <div class="search-result-box" v-if="MSuggests.songs">
              <h4 class="search-result-title">
                <i class="iconfont">&#xe8ab;</i>
                单曲
              </h4>
              <ul class="search-result-ul">
                <li
                  class="search-result-item"
                  v-for="item in MSuggests.songs"
                  :key="item.id"
                  @click="clickSongs(item.id)"
                >
                  <a href="javascript:;">
                    <span class="search-result-item-name">
                      {{ item.name }}
                    </span>
                    -
                    <span class="search-result-item-other">
                      <span v-for="(art, n) in item.artists" :key="art.id">
                        <i v-if="n > 0">/</i>
                        {{ art.name }}
                      </span>
                    </span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="search-result-box" v-if="MSuggests.artists">
              <h4 class="search-result-title">
                <i class="iconfont">&#xe8cf;</i>
                歌手
              </h4>
              <ul class="search-result-ul">
                <li
                  class="search-result-item"
                  v-for="item in MSuggests.artists"
                  :key="item.id"
                  @click="clickArtistDetail(item.id)"
                >
                  <a href="javascript:;">
                    <span class="search-result-item-name">
                      {{ item.name }}
                    </span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="search-result-box" v-if="MSuggests.albums">
              <h4 class="search-result-title">
                <i class="iconfont">&#xe8d0;</i>
                专辑
              </h4>
              <ul class="search-result-ul">
                <li
                  class="search-result-item"
                  v-for="item in MSuggests.albums"
                  :key="item.id"
                  @click="clickAlbumDetail(item.id)"
                >
                  <a href="javascript:;">
                    <span class="search-result-item-name">
                      {{ item.name }}
                    </span>
                    -
                    <span class="search-result-item-other">
                      {{ item.artist.name }}
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="search-main">
        <div class="search-nav">
          <ul class="clearfix">
            <li
              v-for="(item, index) in nav"
              :key="index"
              :class="[
                'search-nav-item',
                { 'search-nav-item-current': MCurrentIndex == index },
              ]"
              @click="clickItem(index)"
            >
              <h2>
                <a href="javascript:;">{{ item }}</a>
              </h2>
            </li>
          </ul>
        </div>
        <div
          :class="[
            'search-router',
            { 'search-router-l': MCurrentIndex == 0 },
            { 'search-router-r': MCurrentIndex == 6 },
          ]"
        >
          <router-view v-if="isRouterAlive"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MInput: this.$store.state.MInput,

      // 去除前面空格的输入内容
      MTrimInput: "",
      // 防抖计时器
      MTimeout: null,
      // 搜索建议数据
      MSuggests: {},
      // 控制搜索建议显示隐藏
      MShowResult: false,
      nav: ["单曲", "歌手", "专辑", "歌单", "视频", "歌词", "用户"],
      types: [1, 100, 10, 1000, 1014, 1006, 1002],
      names: [
        "SearchSong",
        "SearchArtist",
        "SearchAlbum",
        "SearchPlaylist",
        "SearchVideo",
        "SearchLyric",
        "SearchUser",
      ],
      path: [],
      MCurrentIndex: 0,
      isRouterAlive: true,
    };
  },
  mounted() {
    console.log(this.$route.query.type);

    if (this.$route.query.type == 1) {
      this.MCurrentIndex = 0;
    }
    if (this.$route.query.type == 100) {
      this.MCurrentIndex = 1;
    }
    if (this.$route.query.type == 10) {
      this.MCurrentIndex = 2;
    }
    if (this.$route.query.type == 1000) {
      this.MCurrentIndex = 3;
    }
    if (this.$route.query.type == 1014) {
      this.MCurrentIndex = 4;
    }
    if (this.$route.query.type == 1006) {
      this.MCurrentIndex = 5;
    }
    if (this.$route.query.type == 1009) {
      this.MCurrentIndex = 6;
    }
    if (this.$route.query.type == 1002) {
      this.MCurrentIndex = 6;
    }
    console.log(this.MCurrentIndex);
    this.clickItem(this.MCurrentIndex);
    document.addEventListener("click", (e) => {
      if (e.target.className !== "mod-top-search-m") {
        this.MShowResult = false;
      }
    });
  },
  methods: {
    clickItem(index) {
      this.MCurrentIndex = index;
      this.$router.push({
        path: "/search",
        name: this.names[index],
        query: {
          k: this.MInput,
          type: this.types[index],
        },
      });
    },
    clickSongs(id) {
      this.playSong(id);
      // this.$router.push({ path: "/song", query: { id: id } });
    },
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    clickAlbumDetail(id) {
      this.playAlbumDetail(id);
    },
    MSearch() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    MSearchInput() {
      // 防抖
      clearTimeout(this.MTimeout);
      this.MTimeout = setTimeout(() => {
        // this.$store.state.MInput = this.MInput;
        this.$store.commit("changeMInput", this.MInput);
        // this.MInput = this.$store.state.MInput;
        // console.log(this.input);
        // console.log(this.$store.state.input);
        this.MTrimInput = this.MInput.trimLeft();
        // console.log(this.MTrimInput);
        // this.MSuggests = {};
        // this.MShowResult = false;
        this.getSearchSuggest();
      }, 500);
    },
    getSearchSuggest() {
      // 搜索建议接口
      this.axios({
        url: "/search/suggest?keywords=" + this.MTrimInput,
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          if (res.data.result.order) {
            this.MShowResult = true;
            this.MSuggests = res.data.result;
            console.log(this.MSuggests);
          }
        } else {
          this.MShowResult = false;
        }
      });
    },
  },
};
</script>

<style>
.mod-search {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.mod-search .search-hd {
  position: relative;
  height: 100px;
  width: 100%;
}
.mod-search .mod-top-search-m {
  position: absolute;
  top: 20px;
  left: 300px;
  padding-bottom: 2px;
  width: 600px;
  text-overflow: ellipsis;
}
.mod-search .mod-search-input {
  border: 1px solid #c9c9c9;
  padding: 0 50px 0 11px;
  line-height: 50px;
  height: 50px;
  margin-top: 0;
  border-radius: 3px;
  background-color: #fff;
}
.mod-search .search-input-input {
  width: 540px;
  height: 34px;
  border: 0;
  font-size: 20px;
  outline-style: none;
}
.mod-search .search-input-btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  width: 50px;
  height: 50px;
  overflow: visible;
  background: transparent;
  cursor: pointer;
}
.mod-search .search-input-btn .el-icon-search {
  font-size: 24px;
}
.mod-search .search-input-btn .el-icon-search:hover {
  color: var(--color-theme);
}
.mod-search .icon-txt {
  font: 0/0 a;
}
.mod-search .mod-search-result {
  position: relative;
  top: 2px;
  width: 600px;
  line-height: 36px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
}
.mod-search .search-result-box {
  position: relative;
}
.mod-search .search-result-title {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  color: #999;
}
.mod-search .search-result-title .iconfont {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
}
.mod-search .search-result-ul {
  margin-left: 100px;
  border-bottom: 1px solid #f2f2f2;
}
.mod-search .search-result-item {
  padding-left: 36px;
  width: 100%;
  border-left: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.mod-search .search-result-item:hover {
  background-color: var(--color-theme);
}
.mod-search .search-result-item a {
  color: #999;
}
.mod-search .search-result-item:hover a {
  color: #fff;
}
.mod-search .search-result-item-name {
  color: var(--color-theme);
}
.mod-search .search-result-item:hover .search-result-item-name {
  color: #fff;
}

.search-main {
  position: relative;
  width: 100%;
}
.search-nav {
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.search-nav ul {
  width: 100%;
}
.search-nav-item {
  position: relative;
  float: left;
  width: 14.28%;
  text-align: center;
}
.search-nav-item h2 {
  font-weight: 400;
  font-size: 20px;
}
.search-nav-item a {
  color: #999;
}
.search-nav-item a:hover {
  color: var(--color-theme);
}
.search-nav-item-current {
  background-color: var(--color-theme-light-4);
  border-radius: 10px 10px 0 0;
}
.search-nav-item-current a {
  color: var(--color-theme);
}
.search-router {
  width: 100%;
  background-color: var(--color-theme-light-4);
  border-radius: 15px;
}
.search-router-l {
  border-radius: 0 15px 15px 15px;
}
.search-router-r {
  border-radius: 15px 0 15px 15px;
}
</style>